<template>
    <div class="section">
        <div class="phoNumBox">
            <input v-model="phonum" class="phoNum" type="text" placeholder="请输入手机号"/>
            <image class="phoNumIcon" style="width:24px;height:36px" src="../../../web/img/login_phone.png"></image>
        </div>
        <div class="vrfcodeBox">
            <input v-model="vrfcode" class="writevrfcode" type="text" placeholder="请输入短信验证码"/>
            <text @click="nextpre && getvrfcode()" class="getvrfcode">{{gettext}}</text>
            <image class="vrfcodeIcon" style="width:28px;height:30px" src="../../../web/img/login_validate.png"></image>
        </div>
        <div @click="loginin" class="btn">{{loginIn}}</div>
        <div class="fgLine">
            <div class="one"></div>
            <div class="two">其他方式登录</div>
            <div class="three"></div>
        </div>
        <div class="otherLogin">
            <div class="wxLogin">
                <image style="width:69px;height:69px;" class="qqpic" src="../../../web/img/login_wechat.png"></image>
                <text class="wxtext">微信登录</text>
            </div>
            <div class="qqLogin">
                <image style="width:69px;height:69px;" class="wxpic" src="../../../web/img/login_QQ.png"></image>
                <text class="qqtext">QQ登录</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login-sec",
        data(){
            return{
                seconds:60,
                gettext:"获取验证码",
                loginIn:"登录",
                nextpre:true,
                phonum:null,
                vrfcode:null,
            }
        },
        methods:{
            // 获取验证码点击事件
            getvrfcode(){
                var reg1=/^1[0-9]{10}$/;

                if(this.phonum===null){
                    alert("请输入手机号码")
                    return false
                }else if(!reg1.test(this.phonum)){
                    alert("请输入正确的手机号码")
                }else{
                    this.loginIn="一键登录"
                    this.gettext="60秒";
                    var timer= setInterval(()=>{
                        this.seconds--;
                        this.nextpre=false;
                        this.gettext=this.seconds+"秒";
                        if(this.seconds===0){
                            clearInterval(timer);
                            this.seconds=60;
                            this.gettext="重新获取"
                            this.nextpre=true;
                        }
                    },1000);

                    /*
                    * fetch请求发送
                    * */


                }

            },
            // 登入点击事件
            loginin(){
                if(this.phonum===null){
                    alert("请输入手机号码")
                }else if(this.vrfcode===null){
                    alert("请输入验证码")
                }else{
                    var reg1=/^1[0-9]{10}$/;
                    let pwd = /^[0-9]{4,8}$/;
                    if(reg1.test(this.phonum)&&pwd.test(this.vrfcode)){

                        /*
                        * fetch请求发送
                        * */

                        console.log("数据库查询开始")
                    }else{
                        alert("请核对手机号码/短信验证码")
                    }
                }
            },



        }
    }
</script>

<style scoped>
    .otherLogin{
        margin:0 auto;
        margin-top:72px;
        flex-direction: row;
        width:330px;
    }
    .wxLogin{
        flex:1;
    }
    .qqLogin{
        flex:1;
    }
    .qqpic{
        margin:0 auto;
    }
    .wxpic{
        margin:0 auto;
    }
    .wxtext{
        text-align: center;
        line-height: 90px;
        color:#666;
        font-size:30px;
    }
    .qqtext{
        text-align: center;
        line-height: 90px;
        color:#666;
        font-size:30px;
    }
    .fgLine{
        margin-top:240px;
        width:100%;
        flex-direction:row;
        align-items: center;
    }
    .one,.three{
        flex:1;
        border-top:1px solid #ccc;
    }
    .two{
        font-size: 26px;
        color:#999;
        padding:0 40px;
        font-weight: 300;
    }
    .section{
        display:block;
        overflow-y: scroll;
        flex:1;
    }
    input{
        height:50px;
        flex:1;
        margin:0 auto;
        outline: none;
        text-indent: 88px;
        color:#333;
        font-weight: 600;
    }
    input::-webkit-input-placeholder{
        color:#999;
        font-weight: 600;
        text-indent: 88px;
    }
    .phoNumBox{
        width:598px;
        border-bottom:1px solid #d2d2d2;
        margin:0 auto;
        position: relative;
        flex-direction: row;
    }
    .phoNum{
        margin-top:80px;
    }
    .vrfcodeBox{
        margin:0 auto;
        margin-top:58px;
        position: relative;
        width:598px;
        flex-direction: row;
        border-bottom:1px solid #d2d2d2;
        align-items: center;
    }
    .phoNumIcon{
        position:absolute;
        left:40px;
        top:80px;
    }
    .vrfcodeIcon{
        position:absolute;
        left:40px;
        top:8px;
    }
    .getvrfcode{
        padding-left:22px;
        font-size: 30px;
        font-weight: 600;
        color:#33c179;
        border-left:1px solid #999;
        line-height:30px;
    }
    .btn{
        margin:0 auto;
        margin-top:120px;
        background: #33c179;
        width:320px;
        height:74px;
        border-radius: 37px;
        font-size: 32px;
        font-weight: 600;
        color:#fff;
        text-align: center;
        line-height: 74px;
    }
</style>